<template>
  <div class="a-card box">
    <div class="a-card-header">
      <div class="title">{{ title }}</div>
      <div class="author">{{ author }}</div>
    </div>
    <div class="a-card-content">
        
      <div>
        {{ content }}
      </div>
    </div>
    <div class="a-card-footer"></div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'

export interface ArticleOutline {
  title: string
  content: string
  author: string
  id: string | number
}
const props = defineProps<{ article: ArticleOutline }>()
const { title, content, author } = toRefs(props.article)
</script>

<style lang="scss" scoped>
.a-card {
  padding: 24px;
  cursor: pointer;
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
